<template>
	<div>
		    <h2 class="">Agora Video Web SDK Quickstart</h2>
		     <div >
		                <button type="button" id="join" @click="createHostLive('s')">屏幕分享直播</button>
						<button type="button" id="join" @click="createHostLive('v')">摄像头直播</button>
						
						<button type="button" id="join" @click="createAudLive()">游客</button>
		                <button type="button" id="leave" @click="leaveLive()">Leave</button>
		     </div>
			 <!-- <el-row>
				 <el-col lg=""></el-col>
				 
			 </el-row> -->
			 <div class="screenContent" >
			     <div class="liveScreen" id="localStream"
>
			     </div>
			 </div>
			 <div class="screenContent" >
			 	<div class="liveScreen" id="localStream2"
				v-loading="screenLoading"
				element-loading-text="直播间创建中..."
				></div>
			 </div>
	</div>
	
	
	
	
</template>

<script src="./demo.js"> </script>

<style>
	.liveScreen {
		width: -webkit-fill-available;
		height: -webkit-fill-available;
		background-color: #2c2c2c;
		
/* 	  float: left;
	  width: 100vw;
	  height: 80vh;
	  
	  overflow: hidden; */
	}
	.screenContent {
		/* width: 100%; */
		height: 56vw;
		
/* 	  overflow: hidden;
	  width: 100vw;
	  height: 80vh;
	  float: left; */
	  }
</style>
